<template>
  <x-layout>
    <template #scroll>
      <view class="flex flex-wrap gap-20rpx items-center justify-center p-10rpx h-100%">
        <view
          v-for="(item,index) in list"
          :key="index"
          @click="openDetail(item)"
          class="flex flex-col gap-10rpx justify-center items-center border-rd-20rpx bg-white text-28 w-180 h-180"
        >
          <image :src="item.url" class="w-80 h-80" />
          <view class="color-#787878">
            {{ item.name }}
          </view>
        </view>
      </view>
    </template>
  </x-layout>
</template>

<script setup>
import { getImg } from '@/utils/tools.js'

const list = [
  { name: '虎扑步行街', value: 'huPu', url: getImg('hotList/hupu.svg') },
  { name: '知乎热榜', value: 'zhihuHot', url: getImg('hotList/zhihu.svg') },
  { name: '36氪', value: '36Ke', url: getImg('hotList/36ke.svg') },
  { name: '百度热点', value: 'baiduRD', url: getImg('hotList/baidu.svg') },
  { name: '哔哩哔哩', value: 'bili', url: getImg('hotList/bilibili.svg') },
  { name: '贴吧热议', value: 'baiduRY', url: getImg('hotList/tieba.svg') },
  { name: '微博热搜', value: 'wbHot', url: getImg('hotList/weibo.svg') },
  { name: '抖音热点', value: 'douyinHot', url: getImg('hotList/douyin.svg') },
  { name: '豆瓣小组', value: 'douban', url: getImg('hotList/douban.svg') },
  { name: '少数派', value: 'ssPai', url: getImg('hotList/shaoshupai.svg') },
  { name: 'IT资讯热榜', value: 'itInfo', url: getImg('hotList/it.svg') },
  { name: 'IT资讯最新', value: 'itNews', url: getImg('hotList/it.svg') }
]
const openDetail = (item) => {
  uni.navigateTo({
    url: `/pages/hotList/detail?name=${item.name}&type=${item.value}`
  })
}
</script>

<style lang="scss" scoped>

</style>
